<!--入口页-->
<template>
    <div>
        <el-container>
            <el-header>
                <!-- <eu-header>
                 </eu-header>-->
            </el-header>
            <el-container>
                <el-aside width="25%">
                    <!--<LeftComponents></LeftComponents>-->
                    <LeftPanel/>
                </el-aside>
                <el-main>
                                        <PhoneFrame></PhoneFrame>
                    <!--                    <eu-edit-tool-left></eu-edit-tool-left>-->
                    <!--                    <eu-edit-tool-right></eu-edit-tool-right>-->
<!--                    <template v-if="pattern==='component' || checkFile.isCanDrag === true">-->
<!--                        <PhoneFrame></PhoneFrame>-->
<!--                    </template>-->
                    <!--                    <template v-else>-->
                    <!--                        <common-file-frame></common-file-frame>-->
                    <!--                    </template>-->
                </el-main>
                <el-aside width="25%" style="padding-top: 10px">
                    <!--<RightComponents></RightComponents>-->
                </el-aside>
            </el-container>
        </el-container>
    </div>
</template>

<script>
  import LeftPanel from '../..//components/LeftComponents'
  import PhoneFrame from '../../components/PhoneFrame'

  export default {
    name: 'Home',
    components: {
      LeftPanel,
      PhoneFrame
    }
  };
</script>

<style lang="stylus">
    .el-header, .el-footer {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 60px;
        border-bottom: #c8c7cc solid 1px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        z-index: 100;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: center;
        height: calc(100vh - 60px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        z-index: 99;
    }

    .el-main {
        position: relative
        background-color: #E9EEF3;
        color: #333;
        height: calc(100vh - 60px);
        width: 50%;
        background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
</style>
